<template>
  <div class="comment-container">
    <el-table :data="list" stripe>
      <el-table-column label="评论ID" width="180" prop="id"></el-table-column>
      <el-table-column
        prop="title"
        label="文章名"
        width="180"
      ></el-table-column>
      <el-table-column label="用户名" prop="author"></el-table-column>
      <el-table-column label="评论内容" width="500">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.content"
            placement="top-start"
          >
            <el-tag size="medium">
              {{ scope.row.content }}
            </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          {{ scope.row.created | toDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-popconfirm
            title="这是确定删除吗？"
            @onConfirm="handleDelete(scope.row.id)"
          >
            <el-button slot="reference" size="mini" type="danger">
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
  import { getcommentAll, delcomment } from "@/api/article";
  export default {
    name: "Comment",
    components: {},
    filters: {
      toDate(nS) {
        if (nS == null) {
          return "无";
        } else {
          let date = new Date(parseInt(nS));
          let Y = date.getFullYear() + "年";
          let M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "月";
          let D = date.getDate() + "日";
          return Y + M + D;
        }
      },
    },
    data() {
      return {
        list: [],
        queryForm: {
          pageNo: 1,
          pageSize: 10,
        },
        total: 0,
        imageList: [],
        background: true,
        layout: "total, prev, pager, next, jumper",
      };
    },
    created() {
      this.getData();
    },
    mounted() {},
    methods: {
      async getData() {
        getcommentAll(this.queryForm).then((res) => {
          console.log(res);
          this.list = [];
          res.data.forEach((item, index) => {
            this.list.push(item);
          });
          this.total = res.num;
          console.log(this.list);
        });
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val;
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          this.getData();
          loading.close();
        });
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val;
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          this.getData();
          loading.close();
        });
      },
      handleDelete(id) {
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          delcomment({ id }).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getData();
              loading.close();
            }
          });
        });
      },
    },
  };
</script>
